<script lang="ts" setup>
import { ref, reactive, computed } from "vue";
import UniEasyinput from "../../uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue";

// 模拟数据
const routerOptions = [
  {
    id: "1",
    label: "系统管理",
    children: [
      { id: "1-1", label: "用户管理" },
      { id: "1-2", label: "角色管理" },
      { id: "1-3", label: "权限管理" },
    ],
  },
  {
    id: "2",
    label: "内容管理",
    children: [
      { id: "2-1", label: "文章管理" },
      { id: "2-2", label: "评论管理" },
    ],
  },
];

const perOptions = [
  {
    id: "1",
    label: "用户操作",
    children: [
      { id: "1-1", label: "新增用户" },
      { id: "1-2", label: "编辑用户" },
      { id: "1-3", label: "删除用户" },
    ],
  },
  {
    id: "2",
    label: "角色操作",
    children: [
      { id: "2-1", label: "新增角色" },
      { id: "2-2", label: "编辑角色" },
      { id: "2-3", label: "删除角色" },
    ],
  },
];

const formData = reactive({
  id: 0,
  Name: "",
  router: "",
  Per: "",
  perId: [],
  routerId: [],
  roleDescription: "",
  updateBy: "admin",
  status: "1",
});

const currentTime = ref("2025-03-03 13:47");

const isFormValid = computed(() => {
  return formData.Name && formData.router && formData.Per;
});

const handleStatusChange = (e: any) => {
  formData.status = e.detail.value ? "1" : "0";
};

const handleRouterChange = (e: any) => {
  formData.router = e.detail.value.join(",");
};

const handlePerChange = (e: any) => {
  formData.Per = e.detail.value.join(",");
};

const validateForm = () => {
  // 表单验证逻辑
};

const handleSave = () => {
  if (!isFormValid.value) {
    uni.showToast({
      title: "请填写必填项",
      icon: "none",
    });
    return;
  }

  uni.showToast({
    title: "保存成功",
    icon: "success",
  });
};

const handleCancel = () => {
  uni.navigateBack();
};
</script>

<template>
  <view class="role-edit">
    <!-- 顶部导航 -->
    <view class="nav">
      <text class="title">角色编辑</text>
      <view class="actions">
        <uni-button size="mini" @click="handleCancel">取消</uni-button>
        <uni-button
            size="mini"
            type="primary"
            @click="handleSave"
            :disabled="!isFormValid"
        >保存</uni-button
        >
      </view>
    </view>

    <!-- 表单内容 -->
    <scroll-view scroll-y class="form-container">
      <view class="form-card">
        <view class="form-item">
          <text class="required-label">角色名称</text>
          <uni-easyinput
              v-model="formData.Name"
              placeholder="请输入角色名称"
              @input="validateForm"
          />
        </view>

        <view class="form-item">
          <text class="label">角色描述</text>
          <uni-easyinput
              v-model="formData.roleDescription"
              type="textarea"
              placeholder="请输入角色描述"
              :maxlength="200"
          />
        </view>

        <view class="form-item">
          <text class="required-label">路由权限</text>
          <uni-data-tree
              ref="routerTree"
              v-model="formData.router"
              :localdata="routerOptions"
              :map="{ text: 'label', value: 'id' }"
              multiple
              @change="handleRouterChange"
          >
          </uni-data-tree>
        </view>

        <view class="form-item">
          <text class="required-label">操作权限</text>
          <uni-data-tree
              ref="perTree"
              v-model="formData.Per"
              :localdata="perOptions"
              :map="{ text: 'label', value: 'id' }"
              multiple
              @change="handlePerChange"
          >
          </uni-data-tree>
        </view>

        <view class="form-item">
          <text class="label">启用状态</text>
          <switch
              :checked="formData.status === '1'"
              @change="handleStatusChange"
              color="#2979ff"
          />
        </view>
      </view>

      <view class="info-footer">
        <text class="info-text">最后操作人：{{ formData.updateBy }}</text>
        <text class="info-text">最后更新时间：{{ currentTime }}</text>
      </view>
    </scroll-view>
  </view>
</template>



<style scoped lang="scss">
page {
  height: 100%;
}

.role-edit {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: #ffffff;
  border-bottom: 1px solid #eee;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.actions {
  display: flex;
  gap: 20rpx;
}

.form-container {
  flex: 1;
  overflow: auto;
  padding: 30rpx;
}

.form-card {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
}

.form-item {
  margin-bottom: 40rpx;
}

.form-item:last-child {
  margin-bottom: 0;
}

.required-label::before {
  content: "*";
  color: #ff0000;
  margin-right: 4rpx;
}

.label {
  display: block;
  margin-bottom: 20rpx;
  font-size: 28rpx;
  color: #333;
}

.info-footer {
  padding: 30rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
}

.info-text {
  display: block;
  font-size: 24rpx;
  color: #999;
  margin-bottom: 10rpx;
}

.info-text:last-child {
  margin-bottom: 0;
}
</style>
